<template>
	<view>
		<!-- 确认签署，弹出验证框 -->
		<uni-popup ref="codeDialog" type="dialog">
			<uni-popup-dialog type="info" title="签署意愿认证（请选择一种验证方式）" @confirm="finishSign" cancelText="取消" confirmText="同意签署">
				<uni-segmented-control :current="signType" :values="items" :style-type="styleType" :active-color="activeColor" @clickItem="onClickItem" />
				<!-- 短信验证码 -->
				<view v-if="signType === 0">
					<p class="flex_p">短信验证码将发送至您的手机：{{ $store.getters.staffInfo.mobile }}</p>
					<view class="block">
						<uni-easyinput v-model="aCheckCodePasteResult" placeholder="请输入验证码" />
						<span class="codeText" @click="getCode($store.getters.staffInfo.mobile,11,'验证码已发送至您的手机，有效期10分钟，请尽快填写')" v-show="btnShow">获取短信验证码</span>
						<span class="codeText" v-show="!btnShow">{{ counter }} s</span>
					</view>
					<view class="sounds-text" @click="changeSound">收不到短信？获取语音验证码</view>
				</view>	
				<!-- 语音验证码 -->
				<view v-if="signType === 1">
					<p class="flex_p">语音呼叫系统将拨打您的手机：{{ $store.getters.staffInfo.mobile }}</p>
					<view class="block">
						<uni-easyinput v-model="aCheckCodePasteResult" placeholder="请输入验证码" />
						<span class="codeText" @click="getCode($store.getters.staffInfo.mobile,111,'请注意接听电话，并输入语音验证码')" v-show="btnShow">获取短信验证码</span>
						<span class="codeText" v-show="!btnShow">{{ counter }} s</span>
					</view>
				</view>	
				<!-- 签署密码 -->
				<view v-if="signType === 2">
					<p class="flex_p">请输入您的签署密码</p>
					<view class="block">
						<uni-easyinput v-model="aCheckCodePasteResult" placeholder="请输入验证码" type="password"/>
						<!-- <span class="codeText">修改密码</span> -->
					</view>
				</view>	
			</uni-popup-dialog>
		</uni-popup>			
	</view>
</template>

<script>
	import {getsmsCode} from "@/api/login";
	export default {
		data() {
			return {
				voiceShow: false, //语音验证码是否显示
				btnShow:true,
				aCheckCodePasteResult: '', // 验证码
				counter: '获取短信验证码',
				signType: 0, //签署意愿认证select
				items: ['短信验证码', '语音验证码', '签署密码'],
				activeColor: '#00a660',
				styleType: 'button'				
			}
		},
		methods: {
			// 确认
			finishSign(){
				if (this.aCheckCodePasteResult == '') {
				    this.$modal.msgError("请输入验证码");
				} else {
					this.$refs.codeDialog.close()
					this.$emit('finishCode',this.aCheckCodePasteResult,this.signType)
				}	
			},
			getCode(mobile,smsType,message) {
			      getsmsCode(mobile, smsType).then( res => {
			          if (res.code === 200) {
			            this.btnShow = false;
						this.$modal.msgSuccess(message);
			            this.counter = this.$smsCounter;
			            const fn = setInterval(()=> {
			              this.counter--
			              if (this.counter < 0 ) {
			                clearInterval(fn)
			                this.counter ='重新获取'
			                this.btnShow = true;
			                this.voiceShow =true;
			              }
			            }, 1000);
			          } else {
			            this.$message({
			              showClose: true,
			              message: "验证码发送失败，请尝试重新登录", 
			              type: "error",
			            });
			          }
			        }
			      );
			    },
			// 使用语音验证码
			changeSound() {
			  this.signType = 1
			},    
			openDialog(){
				this.$refs.codeDialog.open()
			},
			onClickItem(e) {
				if (this.signType !== e.currentIndex) {
						this.signType = e.currentIndex
					}
				},			
		}
	}
</script>

<style lang="scss" scoped>
	.sounds-text{
		margin-top: 10rpx;
		text-align: right;
		color: #999;
		font-size: 24rpx;
		a{
			text-decoration: none;
			color: #999;
		}
	}
	.block{
		position: relative;
	}
	.codeText{
		position: absolute;
		top: 16rpx;
		right: 20rpx;
		color: $uni-color-primary;
		font-size: 26rpx;
	}
	.flex_p{
		margin: 30rpx 0;
	}
	::v-deep .uni-dialog-content{
		display: block;
		padding: 10rpx 40rpx 60rpx 40rpx;
	}
	::v-deep .segmented-control{
		width: 100%;
	}
	::v-deep .uni-popup-dialog{
		width: 90%;
	}
	::v-deep .uni-dialog-title{
		padding: 30rpx;
	}
	::v-deep .uni-dialog-title-text{
		font-size: 30rpx;
	}

</style>
